<template>

    <view class="uni-list fh-width-100">
        <view class="uni-list-cell-divider background-color-after-none background-color-before-none">
            主图
        </view>
        <view class="fh-padding-30">
            <st-uni-image-upload :images="images.main" path="/wwd" item-style="width:100%;height:220px;"
                                 :on-delete="deleteImage" :on-upload-success="onImageUploadMain"></st-uni-image-upload>
        </view>
        <view class="uni-list-cell-divider background-color-after-none background-color-before-none">
            其它图片（8张）
        </view>
        <view class="fh-padding-30">
            <st-uni-image-upload :images="images.normal" :count="8" path="/wwd" :show-all-add="true"
                                 :on-delete="deleteImage"
                                 :on-upload-success="onImageUploadNormal"></st-uni-image-upload>
        </view>
    </view>
</template>

<script>
    import StUniImageUpload from '../../components/StUniImageUpload'
    import {mapState} from 'vuex'

    export default {
        components: {
            StUniImageUpload,
        },
        data() {
            return {
                picData: {}
            };
        },
        computed: {
            ...mapState([
                'userInfo',
            ]),
            images() {
                let normal = this.picData.normal || []
                let main = this.picData.main || []
                normal.forEach(v => {
                    v.type = 'normal'
                })
                return {
                    main: main,
                    normal: normal
                }
            }
        },
        methods: {
            // 删除
            deleteImage(item) {
                let self = this
                this.$http.delete('/app/user-album/' + item.type + '/' + item.id).then(function (res) {
                    self.loadPicData()
                })
            },
            onImageUploadMain(res) {
                this.onImageUpload(res, 'main')
            },
            onImageUploadNormal(res) {
                this.onImageUpload(res, 'normal')
            },
            onImageUpload(res, type) {
                let self = this
                // 更新图片
                self.$http.put('/app/user-album/update', {
                    userId: this.userInfo.id,
                    url: res.data.url,
                    type: type,
                    sequence: self.picData.length + 1
                }).then(res => {
                    // 添加完成
                    self.loadPicData()
                })
            },
            loadPicData: function () {
                uni.showLoading({
                    title: '加载中'
                })

                let self = this
                //加载图片
                this.$http.get('/app/user-album/getList').then(function (res) {
                    let content = res.data

                    if(content.main){
                      content.main.forEach(item => {
                        item.thumbUrl = self.$stUrlTools.appendParam(item.picUrl,self.$config.imageParam)
                      })
                    }
                  if(content.normal){
                    content.normal.forEach(item => {
                      item.thumbUrl = self.$stUrlTools.appendParam(item.picUrl,self.$config.imageParam)
                    })
                  }
                  console.log(content)
                    self.picData = content
                }).catch(function () {
                    self.picData = {}
                }).finally(() => {
                    uni.hideLoading()
                })
            }
        },
        onLoad() {
            this.loadPicData()
        },
        watch: {}
    }
</script>

<style>

</style>
